<!-- 提交记录 -->
<template>
    <!-- <el-empty v-if="false" description="还没有提交过这道题哦~" /> -->
    <el-empty v-if="userStore.userInfo.token.length === 0">
        <!-- 未登录不能查看提交记录 -->
        <template #description>
            <el-text @click="toLogin()" style="color:#1dc779;cursor: pointer;">登录 </el-text>
            <el-text>后查看提交记录哦</el-text>
        </template>
    </el-empty>
    <template v-else>
        <template v-if="isNull">
            <el-empty description="还没有提交过这道题呢~" />
        </template>
        <template v-else>
            <div v-infinite-scroll="loadSubmissions" :infinite-scroll-disabled="disabled">
                <el-card style="width: 95%; margin-bottom: 15px;" shadow="hover" v-for="item in submissionList"
                    :key="item.id" @click="showDetail(item.id)" :body-style="{ cursor: 'pointer' }">
                    <el-row>
                        <el-col :span="4">
                            <svg class="icon" aria-hidden="true" style="width: 2em;height: 2em;">
                                <use :xlink:href="statusView(item.status).icon"></use>
                            </svg>
                        </el-col>
                        <el-col :span="10" style="text-align: center;padding:3px 0">
                            <el-text :type="statusView(item.status).type" size="large">
                                {{ item.status }}
                            </el-text>
                        </el-col>
                        <el-col :span="10" style="text-align: center;padding:3px 0">
                            <el-text type="info" size="large">
                                {{ item.create_date }}
                            </el-text>
                        </el-col>
                    </el-row>
                </el-card>
            </div>

            <el-drawer v-model="detailIsShow" direction="rtl" size="40%" @closed="clearSubmissionDetail()">
                <template #header="{ header }">
                    <h1 :id="header" style="font-size: 24px;">记录详情</h1>
                </template>
                <el-row>
                    <el-text :type="statusView(submissionDetail.status).type" style="font-size: 24px">
                        {{ submissionDetail.status }}
                    </el-text>
                    <el-text type="info" style="margin-left: 60px;">
                        {{ submissionDetail.create_date }}
                    </el-text>
                </el-row>
                <template v-if="submissionDetail.status !== '提交通过'">
                    <div class="status-detail" style="margin-top: 20px;">
                        <el-text type="danger">
                            {{ submissionDetail.status_detail }}
                        </el-text>
                    </div>
                </template>
                <el-row style="margin-top:20px">
                    <el-col :span="12">
                        <el-text>
                            消耗时间:
                        </el-text>
                        <el-tag type="warning">
                            {{ submissionDetail.use_time }}
                        </el-tag>
                        <el-text>
                            ms
                        </el-text>
                    </el-col>
                    <el-col :span="12">
                        <el-text>
                            消耗内存:
                        </el-text>
                        <el-tag type="warning">
                            {{ submissionDetail.use_memory }}
                        </el-tag>
                        <el-text>
                            MB
                        </el-text>
                    </el-col>
                </el-row>
                <el-row class="md">
                    <MdPreview :modelValue="toMD(submissionDetail.submit_code)" previewTheme="default"
                        style="user-select: text;" />
                </el-row>
            </el-drawer>
        </template>
    </template>

</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { useProblemStore } from '@/stores/problem'
import { useUserStore } from '@/stores/user'
import { getSubmissionDetailAPI, getSubmissionListAPI } from '@/apis/submitrecord'
import { ElMessage } from 'element-plus'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/preview.css';
import 'md-editor-v3/lib/style.css';

const problemStore = useProblemStore()
const userStore = useUserStore()

const route = useRoute()
const router = useRouter()

const isNull = ref(false)
const disabled = computed(() => noMore.value)
const noMore = computed(() => reqData.value.isMax)

const submissionList = ref([]) // 提交记录列表
const submissionDetail = ref({
    id: -1,
    status: "",
    status_detail: "",
    submit_code: "",
    create_date: "",
    use_time: "N/A",
    use_limit: "N/A",
})

const reqData = ref({
    page: 1,
    pageFiled: problemStore.problem.title_en,
    isMax: false
})

const languageMap = {
    "C++": "cpp",
    "Java": "java",
    "Python3": "python"
}

const detailIsShow = ref(false)

function toLogin() {
    // 保存跳转前路径
    sessionStorage.setItem('redirectPath', route.fullPath)
    console.log(route.fullPath)
    router.push('/login')
}

function statusView(status) {
    if (status === "提交通过") {
        return { icon: "#icon-tongguo", type: "primary" }
    } else {
        return { icon: "#icon-butongguo", type: "danger" }
    }
}

// 加载提交记录
const loadSubmissions = async () => {
    try {
        const res = await getSubmissionListAPI(`/problem/${problemStore.problem.id}/submitrecord?page=${reqData.value.page}`)
        if (res.code === 0) {
            if (reqData.value.page === 1 && res.submissions.length === 0) {
                // 第一次加载为空
                isNull.value = true
            }
            if (!res.has_more_submissions) {
                // 没有更多评论
                submissionList.value.push(...res.submissions)
                reqData.value.isMax = true

            } else {
                submissionList.value.push(...res.submissions)
                reqData.value.page = res.next_page
            }
        }
    } catch (error) {
        ElMessage({ type: "error", message: "获取提交记录失败" })
    }
}

const showDetail = (subminssionId) => {
    loadSubmissionDetail(subminssionId).then(() => {
        detailIsShow.value = true
    }).catch()

}

const loadSubmissionDetail = async (subminssionId) => {
    const res = await getSubmissionDetailAPI(`/problem/submitdetail/${subminssionId}`)
    try {
        if (res.code === 0) {
            submissionDetail.value = res.submission
        }
    } catch (error) {
        ElMessage({ type: "error", message: "获取提交记录详情失败" })
    }
}

function clearSubmissionDetail() {
    submissionDetail.value.id = -1
    submissionDetail.value.status = ""
    submissionDetail.value.status_detail = ""
    submissionDetail.value.submit_code = ""
    submissionDetail.value.create_date = ""
}

function toMD(submit_code) {
    const text = "```" + languageMap[submissionDetail.value.language] + "\n" + submit_code + "\n```"
    return text
}

</script>

<style scoped lang="scss">
.status-detail {
    width: 100%;
    border-radius: 10px;
    background-color: #fec3ba;
    padding: 5px;
}
</style>